<template>
  <div class="menu-box">
    <!--<a-menu>-->
      <!--<a-menu-item>11111</a-menu-item>-->
      <!--<a-menu-item>22222</a-menu-item>-->
      <!--<a-submenu>-->
        <!--<div slot="title">33333</div>-->
        <!--<a-menu-item>33333-1</a-menu-item>-->
        <!--<a-menu-item>33333-2</a-menu-item>-->
        <!--<a-submenu>-->
          <!--<div slot="title">33333-3</div>-->
          <!--<a-menu-item>33333-3-1</a-menu-item>-->
          <!--<a-menu-item>33333-3-2</a-menu-item>-->
          <!--<a-menu-item>33333-3-3</a-menu-item>-->
        <!--</a-submenu>-->
      <!--</a-submenu>-->
    <!--</a-menu>-->
    <a-menu>
      <template v-for="(item, index) in list">
        <a-menu-item v-if="!item.child" :key="`list_item_${index}`">{{ item.title}}</a-menu-item>
        <re-submenu  v-else :key="`list_item_${index}`" :parent="item" :index="index"></re-submenu>
      </template>
    </a-menu>
  </div>
</template>

<script>
import menuCompinents from '_c/menu-page'
import ReSubmenu from './re-submenu'
const { AMenu, AMenuItem, ASubmenu } = menuCompinents
export default {
  components: {
    ReSubmenu,
    AMenu,
    AMenuItem,
    ASubmenu
  },
  data () {
    return {
      list: [
        {
          title: '1111'
        },
        {
          title: '2222'
        },
        {
          title: '3333',
          child: [
            {
              title: '3333-1'
            },
            {
              title: '3333-2',
              child:[
                {
                  title: '3333-2-1'
                },
                {
                  title: '3333-2-2',
                  child: [
                    {
                      title: '3333-2-2-1'
                    },
                    {
                      title: '3333-2-2-2'
                    },
                    {
                      title: '3333-2-2-3'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less">
.menu-box{
  width: 300px;
  height: 400px;
}
</style>
